<template>
  <div class="home">
    <div class="header">
      <div class="type-wrap" @click="toggle">
        <span class="title">{{ state.currentSelect }}</span>
        <i class="iconfont icon-type" />
      </div>
      <div class="data-wrap">
        <span class="time" @click="monthToggle">
          {{ state.currentTime }}
          <i class="iconfont icon-sort-down" />
        </span>
        <span class="expense">总支出 ¥{{ state.totalExpense }}</span>
        <span class="income">总收入 ¥{{ state.totalIncome }}</span>
      </div>
    </div>
    <PopType ref="popRef" @select="select" />
    <PopMounth ref="popMounthRef" @select="selectMonth" />
    <div class="content-wrap">
      <van-pull-refresh v-model="state.refreshing" @refresh="onRefresh">
        <van-list
          v-model:loading="state.loading"
          :finished="state.finished"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <CardItem v-for="item in state.list" :bill="item" :key="item" />
        </van-list>
      </van-pull-refresh>
      <PopAdd ref="popAddRef" @refresh="onRefresh" />
    </div>
    <div class="add">
      <van-icon name="records" @click="addToggle" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref } from "vue";
import PopType from "../components/PopType.vue";
import PopMounth from "../components/PopMounth.vue";
import CardItem from "../components/CardItem.vue";
import PopAdd from "@/components/PopAdd.vue";
import axios from "../utils/axios";
import dayjs from "dayjs";

const popRef = ref();
const popMounthRef = ref();
const popAddRef = ref();

const state = reactive({
  page: 1, // 列表分页。
  totalPage: 0, // 总页数。
  list: [], // 列表数据。
  loading: false,
  finished: false,
  //是否刷新
  refreshing: false,
  currentSelect: "全部类型",
  currentTime: dayjs().format("YYYY-MM"),
  totalExpense: 0,
  totalIncome: 0,
});
// 获取账单列表方法。
const getBillList = async () => {
  // 请求列表接口。
  const { data } = await axios.get(
    `/bill/list?date=${state.currentTime}&type_id=${state.currentSelect.id || "all"}&page=${
      state.page
    }&page_size=5`
  );
  // 如果 refreshing 为 true，代表下拉刷新了，需要重置 list = []。
  if (state.refreshing) {
    state.list = [];
    state.refreshing = false;
  }
  state.totalExpense = data.totalExpense;
  state.totalIncome = data.totalIncome;
  state.loading = false;
  // 通过 concat 将数据拼接在旧的 list 后面。
  state.list = state.list.concat(data.list);
  state.totalPage = data.totalPage;
  // 如果当前页 page 大于等于总页数 totalPage，则代表数据已经请求完，将 finished 设置为 true。
  if (state.page >= state.totalPage) state.finished = true;
  console.log(state.list);
};
// van-list 加载方法。
const onLoad = () => {
  // 当不是下拉刷新且当前页 page 小于总页数 totalPage，需要加载下一页的数据，所以这里
  if (!state.refreshing && state.page < state.totalPage) {
    state.page = state.page + 1;
  }
  getBillList();
};
// van-pull-refresh 刷新方法。
const onRefresh = () => {
  // 清空列表数据。
  state.finished = false;
  // 页数重置。
  state.page = 1;
  // 重新加载数据。
  // 将 loading 设置为 true，表示处于加载状态。
  state.refreshing = true;
  state.loading = true;
  onLoad();
};

//选择消费类型--------------------------------------------
const toggle = () => {
  popRef.value.toggle();
  console.log(popRef.value);
};
//标题名字
const select = item => {
  state.currentSelect = item.name;
  console.log(state.currentSelect);
};

//选择时间----------------------------
const monthToggle = () => {
  popMounthRef.value.monthToggle();
  console.log(popMounthRef.value.state.show);
};

// 筛选月份
const selectMonth = item => {
  state.currentTime = item;
  console.log(state.currentTime);
};

// 添加账单弹窗开关
const addToggle = () => {
  popAddRef.value.addToggle();
};
</script>

<style lang="scss" scoped>
.home {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding-top: 80px;
  .header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 80px;
    background-color: $primary;
    color: #fff;
    font-size: 14px;
    padding: 20px 20px;
    z-index: 100;
    .type-wrap {
      background-color: #50ca84;
      display: inline-block;
      padding: 6px;
      border-radius: 4px;
      position: relative;
      align-self: baseline;
      .title {
        margin-right: 22px;
      }
      .title::after {
        content: "";
        position: absolute;
        top: 12px;
        bottom: 11px;
        right: 32px;
        width: 1px;
        background-color: #e9e9e9;
      }
    }
    .data-wrap {
      margin-top: 10px;
      font-size: 13px;
      .time {
        margin-right: 12px;
        .sort-down {
          font-size: 12px;
        }
      }
      .expense {
        margin-right: 10px;
      }
    }
  }
  content-wrap {
    height: calc(100% - 50px);
    overflow: hidden;
    overflow-y: scroll;
    background-color: #f5f5f5;
    padding: 10px;
    padding-bottom: 50px;
  }
  .add {
    position: fixed;
    bottom: 100px;
    right: 30px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1px solid #e9e9e9;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    background-color: #fff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    color: $primary;
  }
}
</style>
